<template>
	<view class="wrapper">
		<view class="nav-top flex">
			<!-- <view class="item flex" :class="{active:activeIndex == index}" v-for="(item,index) in navItems" :key="item.id" @click="changeIndex(index)">{{item.name}}</view> -->
			 <wuc-tab style="width: 100%;" :tab-list="navItems" :tabCur.sync="activeIndex" textFlex tab-class="text-center bg-white wuc-tab"  select-class="text-blue" @change="tabChange"></wuc-tab>
		</view>
		<view class="swiper-box">
			<swiper circular :current="activeIndex" @change="changeSwiper">
				<swiper-item>
					<view class="list-head flex">
						<view class="num flex flex-center">订单编号</view>
						<view class="list-item flex flex-center">状态</view>
						<view class="list-item flex flex-center">日期</view>
					</view>
					<scroll-view scroll-y="true">
						<view class="order-item  flex flex-center" v-for="(item,index) in orderLists" :key='index'>
							<view class="num">{{item.num}}</view>
							<view class="status item" :class="{subs:item.status == 1}">{{item.status == 0?'代发货':'已完成'}}</view>
							<view class="date item">{{item.date}}</view>
						</view>
						<view class="example-body" @click="loadMore">
							<uni-load-more :status="status" :content-text="contentText"/>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<view class="list-head flex">
						<view class="num flex flex-center">订单编号</view>
						<view class="list-item flex flex-center">状态</view>
						<view class="list-item flex flex-center">日期</view>
					</view>
					<scroll-view scroll-y="true">
						<view class="order-item  flex flex-center" v-for="(item,index) in orderLists1" :key='index'>
							<view class="num">{{item.num}}</view>
							<view class="status item" :class="{subs:item.status == 1}">{{item.status == 0?'代发货':'已完成'}}</view>
							<view class="date item">{{item.date}}</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<view class="list-head flex">
						<view class="num flex flex-center">订单编号</view>
						<view class="list-item flex flex-center">状态</view>
						<view class="list-item flex flex-center">日期</view>
					</view>
					<scroll-view scroll-y="true">
						<view class="order-item  flex flex-center" v-for="(item,index) in orderLists2" :key='index'>
							<view class="num">{{item.num}}</view>
							<view class="status item" :class="{subs:item.status == 1}">{{item.status == 0?'代发货':'已完成'}}</view>
							<view class="date item">{{item.date}}</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default{
		components: { 
			WucTab ,
			uniLoadMore
		},
		data(){
			return{
				activeIndex:0,
				contentText:{
					contentdown: '点击加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
				status:'more',
				navItems:[
					{id:0,name:'全部订单'},
					{id:1,name:'代发货'},
					{id:2,name:'已完成'}
				],
				orderLists:[
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:1,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:1,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:1,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'}
				],
				orderLists1:[
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'},
					{num:'D201902215164646',status:0,date:'2019-11-28'}
				],
				orderLists2:[
					{num:'D201902215164646',status:1,date:'2019-11-28'},
					{num:'D201902215164646',status:1,date:'2019-11-28'},
					{num:'D201902215164646',status:1,date:'2019-11-28'},
				]
			}
		},
		methods:{
			tabChange(index) {
			    this.activeIndex = index;
			},
			changeIndex(index){
				this.activeIndex = index
			},
			changeSwiper(e){
				console.log(e.target.current)
				this.activeIndex = e.target.current
			},
			loadMore(){
				if(this.status == 'loading'){
					return
				}
				this.status = 'loading'
				setTimeout(() => {
					this.status = 'noMore'
				},2000)
			}
		}
	}
</script>

<style lang="less">
	@borderBottom:#C8C7CC;
	.wrapper{
		height: 100%;
		width: 100%;
		.nav-top{
			height: 120upx;
			background-color: #FFFFFF;
			margin-bottom: 20upx;
			padding-bottom: 20upx;
			.item{
				flex: 1;
				align-items: center;
				justify-content: center;
				&.active{
					color: #F65757;
				}
			}
		}
		.swiper-box{
			height: calc(100% - 140rpx);
			background-color: #FFFFFF;
			swiper{
				height: 100%;
				.list-head{
					height: 80rpx;
					border-bottom: 2rpx solid #C8C7CC;
					padding: 0 20rpx;
					.num{
						width: 300rpx;
					}
					.list-item{
					 flex:1;
					}
				}
				scroll-view{
					height: calc(100% - 80rpx);
					// height:800upx;
					.order-item{
						height: 100rpx;
						border-bottom: 2rpx solid @borderBottom;
						padding: 0 20rpx;
						.item{
							flex: 1;
							text-align: center;
						}
						.num{
							width: 300rpx;
							// color: red;
						}
						.status{
							color: #FB4949;
							&.subs{
								color: #4EA65A;
							}
							
						}
					}
				}
			}
		}
	}
</style>

